<template>
  <div class="login-form">
    <!-- <el-form
      ref="loginForm"
      :model="loginParams"
      :rules="loginRules"
      :class="{ 'form-invalid': !loginFormValid }"
    > -->
    <div>登录状态： {{ loginParams.status }}</div>
    <el-form ref="loginForm" :model="loginParams" :rules="loginRules">
      <el-form-item label="用户名" prop="username">
        <el-input
          v-model="loginParams.username"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>
      <el-form-item label="密  码" prop="password">
        <el-input
          v-model="loginParams.password"
          type="password"
          placeholder="请输入密码"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleSubmit">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script setup lang="ts">
import { reactive } from '@vue/reactivity'
import { ElMessage, FormRules } from 'element-plus'
import { useMessageStore } from '@/stores'
import { Api } from '@/utils/request/api.ts'

import router from '@/router'

const store = useMessageStore()

const validateLtNameg = (rule: any, value: any, callback: any) => {
  if (loginParams.username === '') {
    callback(new Error('必填'))
  } else {
    callback()
  }
}
const validateIsFrank = (rule: any, value: any, callback: any) => {
  if (loginParams.password === '') {
    callback(new Error('必填'))
  } else {
    callback()
  }
}
const loginParams = reactive({
  username: '',
  password: '',
  status: '待登录',
  loginRules: {
    username: { required: true, validator: validateLtNameg, trigger: 'blur' },
    password: { required: true, validator: validateIsFrank, trigger: 'blur' },
  } as FormRules,
})
const handleSubmit = () => {
  loginParams.status = 'success'
  const loginParamsxx = {
    username: 'test',
    password: 'test',
    // hospitalId:""
  }
  Api.getApi('/devapi/zybYun/ip/getUserPCIp', loginParamsxx).then((res) => {
    console.log('登录信息====', res.data)
  })
  store.login('', '').then((r) => {
    if (r) {
      ElMessage({
        message: '登录成功：' + r,
        type: 'success',
      })
      console.log('localStorage===', localStorage.getItem('message'))
      router.push('/')
    }
  })
  // ElMessage('This is a message.'+loginParams.username)
}

// export default {
//   data() {
//     return {
//       loginParams: {
//         username: '',
//         password: ''
//       },
//       loginRules: {
//         username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
//         password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
//       }
//     }
//   },
//   methods: {

//     handleSubmit() {

// // const store = useMessageStore()
// //       this.$refs.loginForm.validate((valid) => {
// //         if (valid) {
// //           store.login(this.loginParams.username, this.loginParams.password)
// //             .then(() => {
// //               this.$message.success('登录成功')
// //               this.$router.push('/')
// //             })
// //             .catch((error) => {
// //               console.error(error)
// //               this.$message.error('登录失败')
// //             })
// //         }
// //       })
//     }
//   },
//   computed: {
//     loginFormValid() {
//       return this.$refs.loginForm ? this.$refs.loginForm.form.valid : true
//     }
//   }
// }
</script>

<style lang="less" scoped>
.login-form {
  width: 550px;
  margin: auto;
  margin-top: 250px;
}
.content {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: var(--c-text);
  margin-top: calc(var(--w-space) * 3);
  a {
    color: #42b983;
  }
}
</style>
